<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        img.radius {
            border-radius: 8px;
        }

        img.radius02 {
            border-radius: 50%;
        }

        .thumb {
            width: 100px;
            height: 150px;
        }

        .thumb2 {
            object-fit: contain;
        }

        .thumb3 {
            object-fit: cover;
        }

        .responsive {
            max-width: 100%;
            height: auto;
        }

        .responsive2 {
            width: 100%;
            height: auto;
        }

        div.bg-green {
            background: #008000;
            padding: 15px;
        }

        div.op1 {
            opacity: 0.1;
        }

        div.op2 {
            opacity: 0.5;
        }

        div.op3 {
            opacity: 0.8;
        }

        div.op4 {
            opacity: 1.0;
        }

        div.bg-op1 {
            /* 背景颜色及透明度 */
            background: rgba(0, 255, 0, 0.1);
        }

    </style>
</head>
<body>
<p>图片尺寸400*300</p>
<img src="../resources/images/paris.jpg"><br>
<hr>
<p>加圆角8px</p>
<img src="../resources/images/paris.jpg" class="radius"> <br>
<p>加圆角50%</p>
<img src="../resources/images/paris.jpg" class="radius02"> <br>
<hr>
<p>图片实际尺寸与给定容器尺寸不同时，默认为自动缩放。容器为100*150</p>
<img src="../resources/images/paris.jpg" alt="" class="thumb"> <br>
<p>object-fit: contain，保持原图片高宽比缩放，填充容器</p>
<img src="../resources/images/paris.jpg" alt="" class="thumb thumb2"> <br>
<p>object-fit: cover，保持原图片高宽比缩放，直到高或宽任一边完全相等，居中，两端裁剪</p>
<img src="../resources/images/paris.jpg" alt="" class="thumb thumb3"> <br>
<hr>
<p>以下图片为网络图片，需联网。实际尺寸: 1000*350。<br>
    默认样式
</p>
<img src="https://www.w3schools.com/css/img_5terre_wide.jpg" alt="此为网络图片">
<p>声明最大宽度100%，高度自动。自动随浏览器窗口尺寸缩小</p>
<img src="https://www.w3schools.com/css/img_5terre_wide.jpg" class="responsive" alt="此为网络图片">
<br>
<p>声明宽度100%，高度自动。自动随窗口缩小及放大</p>
<img src="https://www.w3schools.com/css/img_5terre_wide.jpg" class="responsive2" alt="此为网络图片">
<hr>
<h1>CSS Opacity</h1>
<div class="bg-green op1">opacity 0.1</div>
<div class="bg-green op2">opacity 0.5</div>
<div class="bg-green op3">opacity 0.8</div>
<div class="bg-green op4">opacity 1.0</div>
<br><br>
<hr>
<h1>CSS Opacity Background</h1>
<div class="bg-op1">
    <p>仅背景透明，文本显式正常</p>
</div>
<br><br>
</body>
</html>